<template>
  <div
    class="flex flex-direction"
    style="overflow: hidden"
  >
    <checked-title title="本月案件类型TOP5"></checked-title>
    <div
      class="leixingChat"
      id="leixingChat"
      ref="leixingChat"
      style="height: 180px"
    ></div>
  </div>
</template>

<script>
import { HomeDb } from '@/api'
export default {
  data() {
    return {
      proportionData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      HomeDb.getTypeProportion().then(res => {
        this.proportionData = res.data
          .map(v => {
            return {
              value: v.value,
              name: v.name,
              proportion: v.proportion
            }
          })
          .slice(0, 5)
        this.initChart()
      })
    },
    initChart() {
      let myChart = echarts.init(this.$refs.leixingChat)
      let self = this
      let option = {
        backgroundColor: 'rgba(0,0,0,0)',
        legend: {
          icon: 'circle',
          orient: 'vertical',
          top: 'center',
          width: 20,
          right: '15%',
          itemGap: 20,
          textStyle: {
            color: '#fff',
            fontSize: 15
          },
          formatter: function (name) {
            if (name) {
              const param = self.proportionData.find(v => v.name === name)
              return name + '  ' + param.value + ' 件'
            }
            return
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(31, 73, 135, 0.7)',
          formatter: params => {
            let str = `${params.name}: ${params.value}件`
            return str
          }
        },
        series: [
          // {
          //   //实线外环
          //   type: 'pie',
          //   hoverAnimation: false,
          //   radius: ['30%', '50%'],
          //   center: ['35%', '50%'],
          //   data: [100],
          //   itemStyle: {
          //     color: 'transparent',
          //     borderColor: 'rgb(17,60,112)',
          //     borderWidth: 1,
          //     borderType: 'solid'
          //   },
          //   label: {
          //     show: false
          //   },
          //   tooltip: {
          //     show: false
          //   }
          // },
          // {
          //   type: 'pie',
          //   name: '最里面背景圆',
          //   radius: ['8%', '0%'],
          //   center: ['35%', '50%'],
          //   z: 0,
          //   data: [
          //     {
          //       value: 100,
          //       itemStyle: {
          //         color: '#fff'
          //       },
          //       label: {
          //         show: false
          //       },
          //       labelLine: {
          //         show: false
          //       },
          //       hoverAnimation: false
          //     }
          //   ],
          //   tooltip: {
          //     show: false
          //   }
          // },
          // {
          //   //虚线内环
          //   type: 'pie',
          //   hoverAnimation: false,
          //   radius: ['40%', '60%'],
          //   center: ['35%', '50%'],
          //   data: [100],
          //   itemStyle: {
          //     color: 'transparent',
          //     borderColor: 'rgb(17,60,112)',
          //     borderWidth: 1,
          //     borderType: 'solid'
          //   },
          //   label: {
          //     show: false
          //   },
          //   tooltip: {
          //     show: false
          //   }
          // },
          // {
          //   //虚线内环
          //   type: 'pie',
          //   hoverAnimation: false,
          //   radius: ['50%', '70%'],
          //   center: ['35%', '50%'],
          //   data: [
          //     {
          //       value: 1,
          //       name: '虚线内环',
          //       proportion: '111'
          //     }
          //   ],
          //   itemStyle: {
          //     color: 'transparent',
          //     borderColor: 'rgb(17,60,112)',
          //     borderWidth: 1,
          //     borderType: 'solid'
          //   },
          //   label: {
          //     show: false
          //   },
          //   tooltip: {
          //     show: false
          //   }
          // },
          {
            name: '',
            type: 'pie',
            hoverAnimation: false,
            radius: ['75%', '90%'],
            center: ['30%', '50%'],
            color: [
              'rgb(43, 200, 255)',
              'rgb(255, 255, 190)',
              'rgba(60, 244, 200)',
              'rgb(255, 97, 97)',
              'yellow'
            ],
            label: {
              normal: {
                show: false,
                position: 'inside',
                textStyle: {
                  align: 'center',
                  baseline: 'middle',
                  fontSize: 16,
                  fontWeight: '100'
                }
              }
            },
            labelLine: {
              normal: {
                smooth: true,
                length: 10,
                lineStyle: {
                  width: 1.5
                }
              }
            },
            itemStyle: {
              borderColor: '#0a1a2a',
              borderWidth: '5'
            },
            data: this.proportionData
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
